@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        .Va-container-content{
            height: 72vw;
        }
    </style>
@endpush
@section("content")
    <div class="form-container">
        <el-row :gutter="24" justify="start" type="flex">
            <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12" :push="4">
                <el-form ref="formsModel" :model="formsModel" label-position="right" label-width="140px" size="medium" class="Va-forms" data-7512a93d>

                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="公众号" name="OfficialAccount">
                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>基本信息</span><el-divider></el-divider></div>

                            <el-form-item label="AppID" prop="app_id" class="float-clear">
                                <el-input v-model="formsModel.official.app_id" placeholder="请填写AppID" maxlength="20"></el-input>
                            </el-form-item>

                            <el-form-item label="AppSecret" prop="app_secret" class="float-clear">
                                <el-input v-model="formsModel.official.app_secret" placeholder="请填写AppSecret" maxlength="55"></el-input>
                            </el-form-item>

                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>消息推送配置</span><el-divider></el-divider></div>

                            <el-form-item label="URL" prop="url" class="float-clear">
                                <el-input v-model="formsModel.official.url" placeholder="请填写URL" maxlength="600">
                                    <template slot="prepend">https://</template>
                                    <template slot="append">/api/wx/getWeChatMsg</template>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="Token" prop="token" class="float-clear">
                                <el-input v-model="formsModel.official.token" placeholder="请填写Token" maxlength="55"></el-input>
                            </el-form-item>

                            <el-form-item label="EncodingAESKey" prop="aes_key" class="float-clear">
                                <el-input v-model="formsModel.official.aes_key" placeholder="请填写EncodingAESKey" maxlength="55"></el-input>
                            </el-form-item>
                        </el-tab-pane>

                        <el-tab-pane label="小程序" name="MiniApp">
                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>基本信息</span><el-divider></el-divider></div>

                            <el-form-item label="AppID" prop="app_id" class="float-clear">
                                <el-input v-model="formsModel.mini.app_id" placeholder="请填写AppID" maxlength="20"></el-input>
                            </el-form-item>

                            <el-form-item label="AppSecret" prop="app_secret" class="float-clear">
                                <el-input v-model="formsModel.mini.app_secret" placeholder="请填写AppSecret" maxlength="55"></el-input>
                            </el-form-item>

                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>消息推送配置</span><el-divider></el-divider></div>

                            <el-form-item label="Token" prop="token" class="float-clear">
                                <el-input v-model="formsModel.mini.token" placeholder="请填写Token" maxlength="55"></el-input>
                            </el-form-item>

                            <el-form-item label="EncodingAESKey" prop="aes_key" class="float-clear">
                                <el-input v-model="formsModel.mini.aes_key" placeholder="请填写EncodingAESKey" maxlength="55"></el-input>
                            </el-form-item>
                        </el-tab-pane>

                        <el-tab-pane label="开发平台" name="OpenApp">
                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>基本信息</span><el-divider></el-divider></div>

                            <el-form-item label="AppID" prop="app_id" class="float-clear">
                                <el-input v-model="formsModel.open.app_id" placeholder="请填写AppID" maxlength="20"></el-input>
                            </el-form-item>

                            <el-form-item label="AppSecret" prop="app_secret" class="float-clear">
                                <el-input v-model="formsModel.open.app_secret" placeholder="请填写AppSecret" maxlength="55"></el-input>
                            </el-form-item>

{{--                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>消息推送配置</span><el-divider></el-divider></div>--}}

{{--                            <el-form-item label="Token" prop="token" class="float-clear">--}}
{{--                                <el-input v-model="formsModel.open.token" placeholder="请填写Token" maxlength="55"></el-input>--}}
{{--                            </el-form-item>--}}

{{--                            <el-form-item label="EncodingAESKey" prop="aes_key" class="float-clear">--}}
{{--                                <el-input v-model="formsModel.open.aes_key" placeholder="请填写EncodingAESKey" maxlength="55"></el-input>--}}
{{--                            </el-form-item>--}}
                        </el-tab-pane>

                        <el-tab-pane label="微信支付" name="Pay">
                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>基本信息</span><el-divider></el-divider></div>

                            <el-form-item label="应用ID" prop="app_id" class="float-clear">
                                <el-input v-model="formsModel.pay.app_id" placeholder="请填写应用ID" maxlength="20"></el-input>
                            </el-form-item>

                            <el-form-item label="直连商户号" prop="mch_id" class="float-clear">
                                <el-input v-model="formsModel.pay.mch_id" placeholder="请填写直连商户号" maxlength="55"></el-input>
                            </el-form-item>

                            <el-form-item label="APIV2" prop="api_v2" class="float-clear">
                                <el-input v-model="formsModel.pay.api_v2" placeholder="请填写APIV2" maxlength="55" show-password></el-input>
                            </el-form-item>

                            <el-form-item label="APIV3" prop="api_v3" class="float-clear">
                                <el-input v-model="formsModel.pay.api_v3" placeholder="请填写APIV3" maxlength="55" show-password></el-input>
                            </el-form-item>

                            <div data="分隔栏" style="margin-top: 20px;color: #ccc"><span>API证书</span><el-divider></el-divider></div>

                            <el-form-item label="证书序列号" prop="serial_no" class="float-clear">
                                <el-input v-model="formsModel.pay.serial_no" placeholder="请填写证书序列号" maxlength="55" show-password></el-input>
                            </el-form-item>

                            <el-form-item label="KEY" prop="key_pem" >
                                <el-input v-model="formsModel.pay.key_pem" placeholder="请填写KEY" type="textarea" :rows="3"></el-input>
                            </el-form-item>

                            <el-form-item label="CERT"  prop="cert_pem" >
                                <el-input v-model="formsModel.pay.cert_pem" placeholder="请填写CERT" type="textarea" :rows="3"></el-input>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>

                    <el-form-item class="forms-fixed-bottom">
                        <div class="Va-text-left" data-7512a93d>
                            <el-button class="Va-button" type="primary" size="medium"  @click="formsModelSubmit" :loading="config.loading" :disabled="config.disabled">
                                @{{config.loading ? '提交中...' : '提 交'}}
                            </el-button>
                            <el-button class="Va-button" @click="redirectPage('framework/setup/page/wechat')" type="default" size="medium">刷 新</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
@endsection
{{--  扩展页面  --}}
@section("page")
@endsection
@push('scripts')
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config,$Layouts],
            data: {
                activeName:'OfficialAccount',
                config:{activeTabs:'1', permissions:false, menu_id:0,loading:false,view_loading:true,__table:'WechatConfig'},
                formsModel:{
                    official:{
                        app_id:'',
                        app_secret:'',
                        url:'',
                        token:'',
                        aes_key:''
                    },
                    mini:{
                        app_id:'',
                        app_secret:'',
                        token:'',
                        aes_key:''
                    },
                    open:{
                        app_id:'',
                        app_secret:'',
                        token:'',
                        aes_key:''
                    },
                    pay:{
                        app_id:'',
                        mch_id:'',
                        api_v2:'',
                        api_v3:'',
                        serial_no:'',
                        key_pem:'',
                        cert_pem:''
                    },
                },
                formsSubmits:{
                    official:{
                        app_id:'',
                        app_secret:'',
                        url:'',
                        token:'',
                        aes_key:''
                    },
                    mini:{
                        app_id:'',
                        app_secret:'',
                        token:'',
                        aes_key:''
                    },
                    open:{
                        app_id:'',
                        app_secret:'',
                        token:'',
                        aes_key:''
                    },
                    pay:{
                        app_id:'',
                        mch_id:'',
                        api_v2:'',
                        api_v3:'',
                        serial_no:'',
                        key_pem:'',
                        cert_pem:''
                    },
                },
            },
            methods:{
                handleClick(tab, event) {
                    // console.log(tab, event);
                },

                formsModelSubmit()
                {
                    var that = this;
                    that.config.loading = true;
                    that.$refs['formsModel'].validate(function (valid) {
                        if (valid) {
                            that.formsSubmits.__table = that.config.__table;
                            that.formsSubmits.official = that.formsModel.official;
                            that.formsSubmits.mini = that.formsModel.mini;
                            that.formsSubmits.open = that.formsModel.open;
                            that.formsSubmits.pay = that.formsModel.pay;
                            $Request.postJson('framework/setup/pageUpdateSetup', that.formsSubmits, function (res) {
                                if(res.code === 200){
                                    that.$Message(res.message, function () {
                                        that.config.view_loading = true;
                                        that.getFormsModule();
                                    });
                                } else {
                                    that.config.loading = false;
                                    that.$Message(res.message, 'warning');
                                }
                            })
                        } else {
                            that.config.loading = false;
                        }
                    });
                },

                getFormsModule()
                {
                    var that = this;
                    $Request.postJson('framework/setup/pageGetSetup', {__table: that.config.__table}, function (res) {
                        if(res.code === 200){
                            if(res.result && res.result.official && !Array.isArray(res.result)){
                                that.formsModel.official = res.result.official;
                                that.formsModel.mini = res.result.mini;
                                that.formsModel.open = res.result.open;
                                that.formsModel.pay = res.result.pay;
                            }
                        }
                        that.config.view_loading = false;
                        that.config.loading = false;
                    })
                }
            },
            mounted(){
                this.getFormsModule();
            },
            created() {

            },
        })
    </script>
@endpush